<template>
  <div>
    <!-- <h1>检索阶段</h1> -->
    <div class="commontop">
      <div class="commontop-left">
        <el-select clearable 
          class="elSect"
          v-model="froms.type"
          placeholder="请选择要搜索内容"
          prefix-icon="el-icon-search"
        >
          <el-option
            v-for="item in optionsTitle"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-input
          placeholder="项目名称、ID"
          v-model="froms.keyword"
          clearable
          prefix-icon="el-icon-search"
        ></el-input>
        <el-date-picker
          v-model="froms.dates"
          align="right"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>

        <el-button
          @click="goSearch"
          class="searchbgc"
          icon="iconfont icon-sousuo2"
          >搜索</el-button
        >
        <el-button icon="iconfont icon-jieyuejilu">借阅审批</el-button>
        <el-button @click="goBorrowin()" icon="iconfont icon-jieyuejilu"
          >借阅记录</el-button
        >
        <el-button
          @click="goTemperature()"
          icon="iconfont icon-wenshidujiancejilu"
          >温湿度检测记录</el-button
        >
        <el-button class="searchbgc" @click="ProblemMark">问题标记</el-button>
      </div>
    </div>
    <div class="content">
      <div class="content-left">
        <div class="input-top">
          <el-input
            placeholder="输入关键字进行搜索"
            v-model="filterText"
            clearable
            suffix-icon="iconfont icon-sousuo2"
          >
          </el-input>
        </div>
        <div class="treePlate scroll_wrap">
          <el-tree
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            node-key="id"
            draggable
            @node-click="handleNodeClick"
            :highlight-current="false"
            ref="tree"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span class="nodeLabel">
                {{ node.label }}
                <span class="nodeLefts">{{ data.data_count }}</span></span
              >
              <span class="nodeLeft">
                <el-button
                  class="nodeBtn"
                  size="medium"
                  type="text"
                  @click.stop="append(data)"
                >
                  <i class="iconfont icon-xinjian"></i>
                </el-button>
                <el-button
                  class="nodeBtn"
                  size="medium"
                  type="text"
                  @click.stop="() => remove(node, data)"
                >
                  <i class="iconfont icon-a-shanchu1"></i>
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="content-right">
        <el-table
          v-loading="isLoading"
          :data="tableData"
          border
          :header-cell-style="{
            backgroundColor: '#3963fd',
            color: '#fff',
          }"
          style="width: 100%; margin-top: 20px"
        >
          <template slot="empty">
            <img
              src="@/assets/imgs/暂未数据.png"
              alt
              style="margin-top: 104px"
            />
            <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
          </template>
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="number" label="序号">
            <template slot-scope="scope">
              <a
                @click="goInvolume(scope.row)"
                style="color: blue; cursor: pointer"
                >{{ scope.row.number }}
              </a>
            </template>
          </el-table-column>
          <el-table-column
            width="220"
            prop="archives_no"
            label="档案号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            align="left"
            prop="title"
            width="480"
            label="案卷题名"
          >
          </el-table-column>
          <el-table-column
            width="60"
            prop="base_map"
            label="底图"
            align="center"
          >
          </el-table-column>
          <el-table-column
            align="center"
            width="60"
            prop="blueprint"
            label="蓝图"
          >
          </el-table-column>
          <el-table-column
            align="center"
            width="60"
            prop="page_num"
            label="页册"
          >
          </el-table-column>
          <el-table-column
            align="center"
            width="60"
            prop="page_num"
            label="张数"
          >
          </el-table-column>
          <el-table-column
            width="70"
            align="center"
            prop="years"
            label="案卷所属年代"
          >
          </el-table-column>
          <el-table-column
            width="70"
            align="center"
            prop="store_period"
            label="保管期限"
          >
          </el-table-column>
          <el-table-column
            width="80"
            align="center"
            prop="secret_level"
            label="机密程度"
          >
          </el-table-column>
          <el-table-column width="60" align="center" prop="remark" label="备注">
          </el-table-column>
          <el-table-column
            width="60"
            align="center"
            prop="cabin_no"
            label="柜号"
          >
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current_page"
            :page-sizes="pageSizeArr"
            :page-size="froms.per_page"
            layout="total, sizes, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="25%">
      <el-autocomplete
        class="inline-input"
        v-model="state1"
        type="textarea"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        @select="handleSelect"
      ></el-autocomplete>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commonInfo from "@/utils/common";
import {
  bookTitles,
  getbookTitles,
  getProjectClass,
} from "../../../api/Template/index";
export default {
  data() {
    return {
      //按钮显示隐藏
      xsyc: "1",
      /* 表格数据 */
      tableData: [
        {
          archives_no: "J•SJKZ•5ZH123/169-1",
          base_map: 0,
          blueprint: 0,
          cabin_no: "",
          company_id: 3,
          end_date: "",
          id: 1,
          index: 0,
          number: 1,
          page_num: 207,
          part_company_id: 3,
          problem: "",
          project_classify_id: 12,
          remark: "",
          secret_level: "",
          serial_no: 1,
          start_end_date: "",
          store_period: "永久",
          title:
            "新建石家庄至济南铁路客运专线K123+744～K169+179段站前工程开工报告及附件",

          word_material: 207,
          years: "",
        },
      ],
      optionsTitle: [
        { id: "1", title: "案卷题名" },
        { id: "2", title: "档案号" },
      ],
      /* 表格搜索表单 */
      froms: {
        dates: "",
        keyword: "",
        type: "",
        project_classify_id: sessionStorage.getItem("clickTd"),
        part_company_id: "",
        per_page: 10,
        page: 1,
        classify_id: sessionStorage.getItem("clickTds"),
        project_id: this.$route.query.id,
      },
      /* 树状图搜索 */
      filterText: "",
      /* 树状图数据 */
      data: [],
      /* 获取当前树状图数据的 */
      IDS: {
        project_id: "",
      },
      //问题标记蒙尘
      dialogVisible: false,
      /* 输入建议框的建议数组 */
      restaurants: [],
      /* 提交错误的输入框的绑定值 */
      state1: "",
      /* 加载页面 */
      isLoading: true,

      /*  iDS: {
        classify_id: "",
      }, */
      defaultProps: {
        children: "children",
        label: "title",
      },
      //页面

      //表格页面
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      current_page: 1,

      total: 10,

      //编辑蒙尘
      dialogFormVisible: false,
      formLabelWidth: "120px",
      /* editForm: {}, */
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    /* 获取当前树状图信息 */
    async loadData() {
      this.IDS.project_id = this.$route.query.id;
      let res = await getProjectClass(this.IDS);
      console.log(res);
      this.data = res.data.data;
    },
    /* 点击树状图 */
    handleNodeClick(data) {
      sessionStorage.setItem("clickTds", data.classify_id);
      this.loadData2(this.froms);
    },
    /* 获取当前表格信息 */
    async loadData2(num) {
      console.log(this.froms);
      this.froms.classify_id = sessionStorage.getItem("clickTds");
      this.froms.project_id = this.$route.query.id;
      this.froms = num;
      let res = await getbookTitles(num);
      console.log(res, "111");
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.current_page = res.data.data.current_page;
      this.isLoading = false;
    },
    //搜索
    async goSearch() {
      this.froms.page = 1;
      this.froms.per_page = 10;
      this.current_page = 1;
      console.log(this.froms);
      if (this.froms.keyword == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      this.froms.part_company_id = this.$route.query.companyId;
      let res = await bookTitles(this.froms);
      console.log(res, "123");
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.current_page = res.data.data.current_page;
    },
    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.froms.page = val;
      this.loadData2(this.froms);
    },
    //分页
    handleSizeChange(val) {
      this.froms.per_page = val;
      this.loadData2(this.froms);
    },
    //树形添加
    append(data) {
      console.log(data);
    },
    //树形减少
    remove(node, data) {
      console.log(node, data);
    },
    //问题标记
    ProblemMark() {
      if (this.multipleSelection == null) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: "请先选中要标记的问题",
          type: "error",
        });
      } else {
        this.dialogVisible = true;
      }
    },
    //跳转到借阅记录
    goBorrowin() {
      this.$router.push({
        path: "/project/template-item/retrieval/borrowing",
        /* query: {
          type: ,
        }, */
      });
    },
    //跳转到温湿度检测记录
    goTemperature() {
      this.$router.push({
        path: "/project/template-item/retrieval/temperature",
        /* query: {
          type: ,
        }, */
      });
    },
    //跳转到卷内目录
    goInvolume(row) {
      console.log(row);
      sessionStorage.setItem("title", row.title);
      sessionStorage.setItem("classtitle", row.project_classify_id);
      this.$router.push({
        path: "/project/template-item/filing/construction/SearchVolume",
        query: {
          /* id: row.id,
          ProjectClass: this.id,
          template_id: this.$route.query.template_id,
          companyId: this.$route.query.companyId,
          classId: this.classId, */
        },
      });
    },
    /* 多选输入框返回输入建议的方法 */
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    /* 输入建议框提供的建议 */
    loadAll() {
      return [
        { id: "1", value: "案卷题名重复" },
        { id: "2", value: "页号错误" },
        { id: "3", value: "日期错误" },
        { id: "4", value: "底图错误" },
        { id: "5", value: "档案号错误" },
        { id: "6", value: "页册错误" },
      ];
    },
    /* 输入建议框选中的值 */
    handleSelect(item) {
      console.log(item);
    },
  },

  created() {
    this.loadData();
    this.loadData2(this.froms);
    this.restaurants = this.loadAll();
  },
  /*   mounted: function () {
    this.loadData();
  }, */
};
</script>

<style scoped lang="less">
@import "../../../assets/css/tree.less";
.content {
  display: flex;
  .content-left {
    margin-right: 20px;
  }
  .content-right {
    flex: 1;
    /deep/.el-table__header {
      margin-bottom: 20px;
    }
    /deep/.el-table {
      background-color: #f3f5fb;
    }
    /deep/.el-table .cell {
      display: flex;
    }
    /deep/.el-button--mini {
      font-size: 18px !important;
      padding: 7px 5px;
    }
  }
}
.input-top {
  margin: 20px 0;
}
.commontop .el-input {
  width: 17%;
  background-color: #fff;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.el-table th.el-table__cell.is-leaf {
  border: none;
}
/* /deep/.el-input--suffix .el-input__inner {
  padding-right: 14px;
} */
/deep/.el-table--border .el-table__cell {
  padding-right: none;
}
/deep/.el-input__inner {
  padding: 0 8px;
}
/deep/.commontop-left .el-input__inner {
  padding: 0 30px;
}
/deep/.table[data-v-37ab2b9a] .el-input--mini .el-input__inner {
  height: 40px;
  font-size: 12px;
}
/deep/.commontop-left .elSect .el-input {
  width: 100%;
}
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
</style>